<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Animation - Basic</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  <script type="module">
    import { createAnimation, createGesture } from '../../../../dist/ionic/index.esm.js';
        
    function clamp(val) {
      if (val > 1) {
        return 1;
      } else if (val < 0) {
        return 0;
      }
      
      return val;
    }
    
    const squareA = document.querySelectorAll('.square-a');
    const squareB = document.querySelectorAll('.square-b');
    const squareC = document.querySelectorAll('.square-c');
    
    const track = document.querySelector('.track');
    const cursor = document.querySelector('.track .cursor');
    
    const rootAnimation = createAnimation();
    const animationA = createAnimation('animation-a');
    const animationB = createAnimation('animation-b');
    const animationC = createAnimation('animation-c');
    
    const gesture = createGesture({
      el: track,
      gestureName: 'drag',
      gesturePriority: 100,
      treshold: 5,
      onStart: () => {
        rootAnimation.progressStart();
      },
      onMove: (ev) => {
        const start = ev.startX;
        const width = track.clientWidth;
        
        const lower = start;
        const upper = width - start;
        
        const current = clamp((ev.currentX - lower) / upper);
        
        rootAnimation.progressStep(current);
        cursor.style.transform = `translateX(${ev.currentX - 10}px)`;
      },
      onEnd: (ev) => {
        rootAnimation.progressEnd(true, 0);
        rootAnimation.pause();
        cursor.style.transform = `translateX(${0}px)`;
      }
    });
    
    gesture.enable(true);
    
    animationA
      .addElement(squareA)
      .duration(2000)
      .delay(5000)
      .easing('linear')
      .iterations(Infinity)
      .keyframes([
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 0 },
        { transform: 'scale(1.5) rotate(45deg)', opacity: 0.5, offset: 0.5 },
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 1 }
      ]);
      
    animationB
      .addElement(squareB)
      .duration(500)
      .delay(2000)
      .easing('ease-in-out')
      .iterations(Infinity)
      .keyframes([
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 0 },
        { transform: 'scale(0.5) rotate(-45deg)', opacity: 0.5, offset: 0.5 },
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 1 }
      ]);
      
    animationC
      .addElement(squareC)
      .duration(2000)
      .delay(500)
      .easing('ease-in-out')
      .iterations(Infinity)
      .keyframes([
        { transform: 'scale(1) skew(0deg)', opacity: 1, offset: 0 },
        { transform: 'scale(1.5) skew(15deg)', opacity: 0.5, offset: 0.5 },
        { transform: 'scale(1) skew(0deg)', opacity: 1, offset: 1 }
      ]);
    
    rootAnimation.addAnimation([animationA, animationB, animationC]);
    //rootAnimation.play();
  </script>
  
  <style>
    .square {
      width: 100px;
      height: 100px;
      background: rgba(0, 0, 255, 0.5);
      text-align: center;
      line-height: 100px;
      margin-left: 25px;
      margin-top: 25px;
      margin-bottom: 25px;
    }
    
    .track {
      width: 100%;
      height: 100px;
      background: rgba(0, 255, 0, 0.5);
      text-align: center;
      line-height: 100px;
      user-select: none;
      cursor: ew-resize;
      position: relative;
    }
    
    .track .cursor {
      pointer-events: none;
      width: 10px;
      height: 100px;
      background: rgba(255, 0, 0, 0.5);
      position: absolute;
      top: 0;
    }
  </style>
  </head>

<body
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>Animations</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content>
      <div class="ion-padding">
        <div class="track">
          Drag along the track to animate the elements
          <div class="cursor"></div>
        </div>
        <div class="square square-a">
          Hello
        </div>
        
        <div class="square square-b">
          Hello
        </div>
        
        <div class="square square-c">
          Hello
        </div>
      </div>
    </ion-content>
  </ion-app>
</body>

</html>

